<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册账户</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/reglog.css" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/layout_b.css" />
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/modalwindow.css" />
    <script src="${pageContext.request.contextPath }/js/html5shiv.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/jquery.modalwindow.js"></script>
    <script src="${pageContext.request.contextPath }/js/common.js"></script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.livequery.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
	<script type="text/javascript" src="/js/jquery.validate.extend.js"></script>
    <script type="text/javascript">
		var contextPath = '${pageContext.request.contextPath }';
	</script>
	
    <style type="text/css">
    
    	.filter-tags{
			text-align: center;
	    }
	    .filter-tags li{
	        display:inline-block;
	        
	    }
	    .filter-tags li input{
	        display:none;
	    }
	    .filter-tags li label{
	        border:1px solid #ccc;
	        text-align: center !important;
	        margin: 5px 8px 3px 3px;
	        cursor:pointer;
	        height: 40px !important;
	        width: 100px !important;
	        letter-spacing: 1px;
	        border-radius: 2px;
	        
	    }
	    .filter-tags li label:HOVER{
	        background-color: #F0F0F0;
	    }
	    .filter-tags li input:checked+label{
	        border-color:#333;
	        color:#333;
	        font-weight:600;
	    }
	    .filter-tags li input:checked+label:after{
	        content:'√';
	        color:#333;
	    }
	    
	    
	    
    	
    	label.error{
			padding: 2px 10px 2px 10px!important;
			height: 30px !important;
			line-height:30px;
			color: #FFFFFF !important;
			width: 120px !important;
		}
		
		label.error:before{
			top:8px !important;
		}
		
		.inputwrapperError{
			border-color: #FF0000 !important;
		}
		
		
    </style>
    
</head>
<body>
    <section class="outerwrap">
        <div class="wrap wrap-h">
            <div class="inner">
                <div class="title">
                    <h3>智享停车管理系统</h3>
                </div>
                <form id="form">
                    <div class="inputwrapper">
                        <label for="userName">账　号</label>
                        <input id="userName" name="userName" class="long" type="text" data-vdt="required rangelength 3 20 #字符长度范围[6-20] remote ${pageContext.request.contextPath }/view/checkAccount #该帐号已被使用" />

                    </div>
                    <div class="inputwrapper">
                        <label for="password">密　码</label>
                        <input id="password" name="password" class="long" type="password" placeholder="至少包含字母和数字 最短6位 区分大小写" data-vdt="required rangelength 6 20 #字符长度范围[6-20]" maxlength="20"/>

                    </div>
                    <div class="inputwrapper">
                        <label for="repassword">重复密码</label>
                        <input id="repassword" name="repassword" class="long" type="password"  placeholder="至少包含字母和数字 最短6位 区分大小写" data-vdt="required rangelength 6 20 #字符长度范围[6-20] equalTo [id=password]" maxlength="20"/>

                    </div>
                    
                    <div class="inputwrapper">
                        <label for="mobile">手机号</label>
                        <input id="mobile" name="mobile" class="long" data-vdt="required mobile #手机号码格式不对 remote ${pageContext.request.contextPath }/view/checkMobile #该手机已被使用"/>
                    </div>
                    <div class="validatewrapper">
                        <label for="validatecode">验证码</label>
                        <input id="validatecode" name="code" class="input-short" onblur="javascript: checkCode(this.value);" maxlength="6"/>
                        <button type="button" id="sendCodeBtn" onclick="javascript: sendCheckCode();">获取验证码</button>
                    </div>
                    <div style="margin-left: 50px;margin-top: 5px;">
                    	<label style="color: #FF0000" id="codeHint"></label>
                    </div>
                    <input type="hidden" id="nowCode">
                    <input class="submitBtn" type="button" onclick="javascript: regInfoSave();" value="注册" />
                    
                </form>
            </div>
        </div>
    </section>

    <footer>
        <p class="version">北京聚合众力科技有限公司 SYSTEM VERSION 1.0</p>
        <p class="copyright">&copy; COPYRIGHT BY HUAQING TECHNOLOGY CO.,LTD</p>
    </footer>
</body>

<script type="text/javascript">
	
	
	function chooseuType(val){
		if(1==val){
			$("#userTypeChildYES").show();
			$("#userTypeChildNO").hide();
		}
		else if(0==val){
			$("#userTypeChildYES").hide();
			$("#userTypeChildNO").show();
		}
	}



	var timeID, nowCode;
	function countTime(code){
		nowCode = code;
		$('#nowCode').val(code);
		
		if('获取验证码'==$("#sendCodeBtn").text()){
			$("#sendCodeBtn").text('60');
			$("#sendCodeBtn").addClass('sendBgBtn');
		}
		
		timeID = setInterval("setCodeBtnContent()", 1000);
	}
	
	function setCodeBtnContent(){
		var s = parseInt($("#sendCodeBtn").text()) - 1;
		$("#sendCodeBtn").text(s);
		if(s==0){
			clearInterval(timeID);
			$("#sendCodeBtn").text('获取验证码');
			$("#sendCodeBtn").removeClass('sendBgBtn');
		}
	}
	
	
	function sendCheckCode(){
		$.ajax({
            type: "POST",
            url: contextPath + "/view/sendCheckCode",
            data: {'mobile': $("#mobile").val()},
            dataType : "json",
            beforeSend : function(){
            	$("#beforeLoading").show();
            },
            success: function (res) {
            	$("#beforeLoading").hide();
            	if(res.resData.status){
            		succHint("验证码发送成功");
            		countTime(res.resData.code);
            	}
            	else{
            		failHint();
            	}
            	
            },
            error: function (msg) {
            	failHint();
            }
        });
	}
	
	// 验证码
	function checkCode(val){
		
		if(nowCode!=val){
			$('#codeHint').text('验证码错误');
		}
		else{
			$('#codeHint').text('验证码正确');
		}
		
	}
	
	// 验证表单
	function checkForm(){
		var password = $('#password').val();
		var repassword = $('#repassword').val();
		var codeHint = $('#codeHint').text();
		if(password!=repassword){
			
			$('#password').parent().addClass('inputwrapperError');
			$('#repassword').parent().addClass('inputwrapperError');
			
			return false;
		}
		else{
			$('#password').parent().removeClass('inputwrapperError');
			$('#repassword').parent().removeClass('inputwrapperError');
		}
		
		
		if('验证码正确'!=codeHint){
			$('#validatecode').addClass('inputwrapperError');
			return false;
		}
		else{
			$('#validatecode').removeClass('inputwrapperError');
		}
		
		return true;
	}
	
	// 保存注册信息
	function regInfoSave(){
		
		if($("#form").valid()){
			
			if(checkForm()){
				$.ajax({
	                type: "POST",
	                url: contextPath + "/managerRegister",
	                data: $("#form").serialize(),
	                dataType : "json",
	                beforeSend : function(){
	                	$("#beforeLoading").show();
	                	timeOutHint();
	                },
	                success: function (res) {
	                	$("#beforeLoading").hide();
	                	if(res.resData.status){
	                		succHint();
	                		
	                		setTimeout(function(){
	                			window.location.href="/login";
	                		}, 2500);
	                		
	                	}
	                	else{
	                		failHint();
	                	}
	                	
	                },
	                error: function (msg) {
	                	failHint();
	                }
	            });
			}
            
        }
	}
</script>

</html>
